<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>短驾自租</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="../css/shortrent.shortrent.css">
    <script type="application/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <script type="application/javascript" src="../layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <div id="app">
        <div data-v-67ef3a4a class="csdheader">
            <div data-v-67ef3a4a class="layout clear">
                <div data-v-67ef3a4a class="left csdnav" id="daohang">
                    <label data-v-67ef3a4a v-if="weidenglu" id="loginLobel">
                        <a data-v-67ef3a4a href="../pagehome/login.html" class="colorRed" >登录</a>
                        <a data-v-67ef3a4a href="" class="colorRed">/</a>
                        <a data-v-67ef3a4a href="../pagehome/register.html" class="colorRed" style="margin-right: 10px;">注册</a>
                    </label>

                    <label data-v-67ef3a4a v-if="denglu" id="successLobel">
                        <a data-v-67ef3a4a href="#">你好，</a>
                        <a data-v-67ef3a4a href="#" class="colorRed" id="userName">/</a>
                        <a data-v-67ef3a4a href="../pagehome/index.html" onclick="exitLogin()" class="colorRed" style="margin-right: 10px;" id="exitLogin">[退出]</a>
                    </label>

                    <a data-v-67ef3a4a="" href="#mobileZuChe">手机租车</a>
                    <a data-v-67ef3a4a="" href="helpCenter.html">帮助中心</a>
                </div>
                <div data-v-67ef3a4a="" class="right phone">
                    <div data-v-67ef3a4a="" class="typeTab">
                        <a data-v-67ef3a4a="" href="index.html" style="color: rgb(199, 0, 11);">中文</a>&nbsp;/&nbsp;
                        <a data-v-67ef3a4a="" href="../en/index.html">English</a>
                    </div>
                    <div data-v-67ef3a4a="" class="menu">
                        <a data-v-67ef3a4a="" href="../mymain/mymain.html">我的车速递</a>
                    </div>
                    <div data-v-67ef3a4a="">
                        <i class="layui-icon layui-icon-cellphone" style="font-size:14px;  color:#c6000f;"></i>
                        <span data-v-67ef3a4a="" id="telSpan">400-919-8000</span>
                    </div>
                </div>

            </div>
        </div>

        <div data-v-39f7f629 class="csdnav">
            <div data-v-39f7f629="" class="layout clear">
                <div data-v-39f7f629="" class="left logo">
                    <a data-v-39f7f629="" href="index.html">
                        <img data-v-39f7f629="" src="">
                    </a>
                </div>
                <div data-v-39f7f629="" class="left navCom">
                    <ul data-v-39f7f629="">
                        <li data-v-39f7f629="" >
                            <a data-v-39f7f629="" href="https://www.chesudi.com/module/activity.html" target="_self" >优惠活动</a>
                        </li>
                        <li data-v-39f7f629="">
                            <a data-v-39f7f629="" href="https://www.chesudi.com/module/joinWork.html" target="_blank" class="">加盟合作</a>
                        </li>
                        <li data-v-39f7f629="">
                            <a data-v-39f7f629="" href="https://www.chesudi.com/module/netCar.html" target="_blank" class="">网约车</a>
                        </li>
                        <li data-v-39f7f629="">
                            <a data-v-39f7f629="" href="https://www.chesudi.com/module/longRent.html" target="_blank" class="">企业长租</a>
                        </li>
                        <li data-v-39f7f629="">
                            <a data-v-39f7f629="" href="shortrent.html" target="_self" class="colorRed">短租自驾</a>
                        </li>
                        <li data-v-39f7f629="">
                            <a data-v-39f7f629="" href="/pagehome/index.html" target="_self" >
                                <span data-v-39f7f629="">首页</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="chooseCar">

            <div class="chooseCarL">
                <form action="" onsubmit="return false;">
                    <div class="choose-get item">
                        <span class="itemTitle-red left">取&nbsp&nbsp车&nbsp&nbsp地&nbsp&nbsp址</span>
                        <div id="sel" v-cloak>
                            <select id="dqsel">
                            </select>

                            <select id="bmsel">
                            </select>
                        </div>
                    </div>
                    <div class="choose-return item">
                        <span class="itemTitle-red left">还&nbsp&nbsp车&nbsp&nbsp地&nbsp&nbsp址</span>
                        <div id="seltwo"  v-cloak>
                            <select id="hcc" >
                            </select>

                            <select id="hcs">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="chooseCarR">
                <button class="goChooseCar" onclick="selectCar()">去选车</button>
            </div>
        </div>
    </div>
    <script>

        var storage = window.sessionStorage;

        layui.use(['jquery', 'table', 'layer', 'form'], function () {
            // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
            var $ = layui.$;
            var layer = layui.layer;
            var $ = layui.jquery;
            var form = layui.form;

            var item = storage.getItem('user');
            var user = JSON.parse(item);
            if (user != null) {
                $("#userName").text(user.name);
                $("#telSpan").text(user.tel);
                $("#loginLobel").hide();
            } else {
                $("#successLobel").hide();
            }

            //加载城市信息
            selectCity("#dqsel");
            selectCity("#hcc");

            function selectCity(btn){
                $.ajax({
                    url: "/getAllCity",
                    type: "GET",
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function(data) {
                        $(btn).empty();
                        $(btn).append('<option>请选择</option>');
                        for (var i in data) {
                            $(btn).append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
                        }
                    },
                    error: function() {
                        console.log("ajax error");
                    }
                });
            }

            //城市-取车点选择器点击事件
            $("#dqsel").click(function(){

                var pid = $("#dqsel option:selected").attr("value");
                if (pid != null){
                    selectCounty("#bmsel", pid);
                }
            });

            //城市-还车点选择器点击事件
            $("#hcc").click(function(){

                var pid = $("#hcc option:selected").attr("value");
                if (pid != null){
                    selectCounty("#hcs", pid);
                }
            });

            function selectCounty(btn, pid){
                $.ajax({
                    url: "/getCityByPid/" + pid,
                    type: "GET",
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function(data) {
                        $(btn).empty();
                        $(btn).append('<option>请选择</option>');
                        for (var i in data) {
                            $(btn).append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
                        }
                    },
                    error: function() {
                        console.log("ajax error");
                    }
                });
            }

        });

        function exitLogin(){
            storage.setItem('user', null);
        }

        function selectCar(){
            var dqsel = $("#dqsel option:selected").attr("value");
            var bmsel = $("#bmsel option:selected").attr("value");
            var hcc = $("#hcc option:selected").attr("value");
            var hcs = $("#hcs option:selected").attr("value");
            storage.setItem('bmsel', bmsel);
            storage.setItem('hcs', hcs);

            if (dqsel == null || bmsel == null || hcc == null || hcs == null){
                layui.layer.msg("请选择正确的地址！");
            }else {
                window.location.href = "/shortRent/shortsort.html";
            }
        }

    </script>
</body>
</html>